<template>
    <div style="height: 170px">
        <div id="box5" style="width:60px;height: 115px;float: left">
            <div  class="box">
                <div class="box-1 z-1" style="top: 0%;left: 5%;"></div>
                <div class="box-2 z-2" style="top: 5%;left: 0%;"></div>
                <div class="box-3 z-2" style="top: 5%;left: 55%;"></div>
                <div class="box-4 z-1 notShow" style="top: 55%;left: 5%;"></div>
                <div class="box-5 z-2" style="top: 60%;left: 0%;"></div>
                <div class="box-6 z-2" style="top: 60%;left: 55%;"></div>
                <div class="box-7 z-1" style="top: 110%;left: 5%;"></div>
            </div>
        </div>
        <div id="box6" style="width:60px;height: 115px;float: left;margin-left: 10px">
            <div  class="box">
                <div class="box-1 z-1" style="top: 0%;left: 5%;"></div>
                <div class="box-2 z-2" style="top: 5%;left: 0%;"></div>
                <div class="box-3 z-2" style="top: 5%;left: 55%;"></div>
                <div class="box-4 z-1 notShow" style="top: 55%;left: 5%;"></div>
                <div class="box-5 z-2" style="top: 60%;left: 0%;"></div>
                <div class="box-6 z-2" style="top: 60%;left: 55%;"></div>
                <div class="box-7 z-1" style="top: 110%;left: 5%;"></div>
            </div>
        </div>
        <div style="float: left;font-size:70px">:</div>
        <div id="box3" style="width:60px;height: 115px;float: left">
            <div  class="box">
                <div class="box-1 z-1" style="top: 0%;left: 5%;"></div>
                <div class="box-2 z-2" style="top: 5%;left: 0%;"></div>
                <div class="box-3 z-2" style="top: 5%;left: 55%;"></div>
                <div class="box-4 z-1 notShow" style="top: 55%;left: 5%;"></div>
                <div class="box-5 z-2" style="top: 60%;left: 0%;"></div>
                <div class="box-6 z-2" style="top: 60%;left: 55%;"></div>
                <div class="box-7 z-1" style="top: 110%;left: 5%;"></div>
            </div>
        </div>
        <div id="box4" style="width:60px;height: 115px;float: left;margin-left: 10px">
            <div  class="box">
                <div class="box-1 z-1" style="top: 0%;left: 5%;"></div>
                <div class="box-2 z-2" style="top: 5%;left: 0%;"></div>
                <div class="box-3 z-2" style="top: 5%;left: 55%;"></div>
                <div class="box-4 z-1 notShow" style="top: 55%;left: 5%;"></div>
                <div class="box-5 z-2" style="top: 60%;left: 0%;"></div>
                <div class="box-6 z-2" style="top: 60%;left: 55%;"></div>
                <div class="box-7 z-1" style="top: 110%;left: 5%;"></div>
            </div>
        </div>
        <div style="float: left;font-size:70px">:</div>
        <div id="box1" style="width:60px;height: 115px;float: left">
            <div  class="box">
                <div class="box-1 z-1" style="top: 0%;left: 5%;"></div>
                <div class="box-2 z-2" style="top: 5%;left: 0%;"></div>
                <div class="box-3 z-2" style="top: 5%;left: 55%;"></div>
                <div class="box-4 z-1 notShow" style="top: 55%;left: 5%;"></div>
                <div class="box-5 z-2" style="top: 60%;left: 0%;"></div>
                <div class="box-6 z-2" style="top: 60%;left: 55%;"></div>
                <div class="box-7 z-1" style="top: 110%;left: 5%;"></div>
            </div>
        </div>
        <div id="box2" style="width:60px;height: 115px;float: left;margin-left: 10px">
            <div  class="box">
                <div class="box-1 z-1" style="top: 0%;left: 5%;"></div>
                <div class="box-2 z-2" style="top: 5%;left: 0%;"></div>
                <div class="box-3 z-2" style="top: 5%;left: 55%;"></div>
                <div class="box-4 z-1 notShow" style="top: 55%;left: 5%;"></div>
                <div class="box-5 z-2" style="top: 60%;left: 0%;"></div>
                <div class="box-6 z-2" style="top: 60%;left: 55%;"></div>
                <div class="box-7 z-1" style="top: 110%;left: 5%;"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "test3.vue",
        data() {
            return {
                numbertest:0
            }
        },
        watch:{
            // numbertest:'chickTime'
        },
        mounted(){
        },
        methods:{
            clockNumberShow(number,obj){
                var box_1=obj.find(".box-1");
                var box_2=obj.find(".box-2");
                var box_3=obj.find(".box-3");
                var box_4=obj.find(".box-4");
                var box_5=obj.find(".box-5");
                var box_6=obj.find(".box-6");
                var box_7=obj.find(".box-7");
                if(0==number){
                    box_4.addClass("notShow")
                    box_4.siblings().removeClass("notShow")
                    // console.log(box_4.siblings())
                }else if(1==number){
                    box_3.siblings().addClass("notShow");
                    box_3.removeClass("notShow")
                    box_6.removeClass("notShow")
                }else if(2==number){
                    box_2.siblings().removeClass("notShow")
                    box_2.addClass("notShow")
                    box_6.addClass("notShow")
                }else if(3==number){
                    box_2.siblings().removeClass("notShow")
                    box_2.addClass("notShow")
                    box_5.addClass("notShow")
                }else if(4==number){
                    box_1.siblings().removeClass("notShow")
                    box_1.addClass("notShow")
                    box_5.addClass("notShow")
                    box_7.addClass("notShow")
                }else if(5==number){
                    box_3.siblings().removeClass("notShow")
                    box_5.addClass("notShow")
                    box_3.addClass("notShow")
                }else if(6==number){
                    box_3.siblings().removeClass("notShow")
                    box_3.addClass("notShow")
                }else if(7==number){
                    box_1.siblings().addClass("notShow")
                    box_1.removeClass("notShow")
                    box_3.removeClass("notShow")
                    box_6.removeClass("notShow")
                }else if(8==number){
                    box_1.siblings().removeClass("notShow")
                    box_1.removeClass("notShow")
                }else if(9==number){
                    box_5.siblings().removeClass("notShow")
                    box_5.addClass("notShow")
                }
            },
            chickTime(){
                setInterval(() => {
                    var box1=$("#box1");
                    var box2=$("#box2");
                    var box3=$("#box3");
                    var box4=$("#box4");
                    var box5=$("#box5");
                    var box6=$("#box6");
                    var myDate = new Date();
                    var h=myDate.getHours();       //获取当前小时数(0-23)
                    h=h<10?("0"+h):(h+"");
                    var m=myDate.getMinutes();     //获取当前分钟数(0-59)
                    m=m<10?("0"+m):(m+"");
                    var s=myDate.getSeconds();     //获取秒
                    s=s<10?("0"+s):(s+"");
                    var s1=s.substring(0,1);
                    var s2=s.substring(1,2);
                    this.clockNumberShow(s1,box1)
                    this.clockNumberShow(s2,box2)
                    var m1=m.substring(0,1);
                    var m2=m.substring(1,2);
                    this.clockNumberShow(m1,box3)
                    this.clockNumberShow(m2,box4)
                    var h1=h.substring(0,1);
                    var h2=h.substring(1,2);
                    this.clockNumberShow(h1,box5)
                    this.clockNumberShow(h2,box6)
                }, 1000)
                // setInterval(function (){
                //     var box1=$("#box1");
                //     var box2=$("#box2");
                //     var myDate = new Date();
                //     var h=myDate.getHours();       //获取当前小时数(0-23)
                //     var m=myDate.getMinutes();     //获取当前分钟数(0-59)
                //     var s=myDate.getSeconds()+"";     //获取秒
                //     var number=s.substring(0,1);
                // },1000)
            }
        },
        created() {
            this.chickTime();
        }
    }
</script>

<style scoped>
    .box{position: relative;width: 100px;height: 100px}
    .z-1{position: absolute;width: 50%;height: 5%;background-color:#85ce16;border-radius: 5px;}
    .z-2{position: absolute;width: 5%;height: 50%;background-color:#85ce16;border-radius: 5px;}
    .notShow{background-color:rgb(232, 245, 213)}
</style>